<template>
  <div>
    <van-button @click="handleFindCart">同步获取服务端购物车</van-button>

    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
      v-if="cart.length === 0"
    />
    <div class="cart" v-else>
      <van-swipe-cell
        v-for="product in cart"
        :key="product.id"
      >
        <van-card
          :price="product.price"
          :title="product.title"
          class="goods-card"
        >
          <template #num>
            <van-stepper
              :value="product.amount"
              @change="handleAmountChange(product.id, $event)"
              theme="round"
              button-size="16"
            />
          </template>
          <template #thumb>
            <van-checkbox :value="product.checked" @click="handleChangeChecked(product.id)"></van-checkbox>
            <div class="van-image" style="width: 100%; height: 100%;">
              <img :src="product.image" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="handleRemoveFromCart(product.id)"
          />
        </template>
      </van-swipe-cell>

      <!-- 提交订单栏 -->
      <van-submit-bar :price="total" button-text="提交订单" @submit="$router.push('/confirm')">
        <van-checkbox :value="allChecked" @click="handleChangeAllChecked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送, <span>修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { getCart } from '../../api/cart'
import { mapGetters} from 'vuex'
export default {
  name: 'Cart',
  data() {
    return {}
  },
  computed: {
    ...mapGetters('shoppingCart', ['cart', 'total', 'allChecked']),
    // // 从 store 中获取购物车数组进行使用
    // cart() {
    //   return this.$store.getters['shoppingCart/cart']
    // },
    // total() {
    //   return this.$store.getters['shoppingCart/total']
    // },
    // allChecked() {
    //   return this.$store.getters['shoppingCart/allChecked']
    // },
  },
  methods: {
    // ...mapMutations('shoppingCart', [
    //   'removeFromCart', 'modifyAmount', 'modifyChecked', 'modifyAllChecked',
    // ]),
    handleRemoveFromCart(id) {
      // 更新 store 中购物车状态数据
      this.$store.commit('shoppingCart/removeFromCart', { id })
    },
    handleAmountChange(id, val) {
      // console.log('修改数量：', id, val)
      this.$store.commit('shoppingCart/modifyAmount', { id, amount: val })
    },
    handleChangeChecked(id) {
      this.$store.commit('shoppingCart/modifyChecked', { id })
    },
    handleChangeAllChecked() {
      this.$store.commit('shoppingCart/modifyAllChecked', { allChecked: !this.allChecked })
    },
    handleFindCart() {
      getCart()
        .then(data => {
          console.log('购物车：', data)
        })
        .catch(console.error)
    },
  },
}
</script>

<style lang="less" scoped>
  @white: #fff;

  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }

  .van-card__thumb {
    display: flex;
    width: 100px;
  }

  .custom-image /deep/ .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>
